<style type="text/css">
    @charset "UTF-8";
/* 多規格 */
.goods-spec-many { display: none;}
.goods-spec-many .goods-spec-box {
    margin-top: 8px;
    border: 1px solid #e4e4e4;
    padding: 20px 20px 20px 20px;
    border-radius: 4px;
    margin: 0 0px 0 15px;
}
.spec-group-add-item.form-group {
    margin-left: 0;
    margin-right: 0;
}
.goods-spec-many input { font-size: 1.6rem !important; padding-left: 10px !important; border: 1px solid #e3e2e5 !important; }
.goods-spec-many input.field-error { border-color: #dd514c !important; }
.goods-spec-many .spec-group-item { margin-bottom: 25px; }
.goods-spec-many .spec-group-item .spec-group-name { margin-bottom: 15px; }
.goods-spec-many .spec-group-item .spec-group-name span { font-size: 1.5rem; }
.goods-spec-many .spec-group-item .spec-group-name .icon-shanchu1 { display: inline-block; }
.goods-spec-many .spec-group-item .spec-list .spec-item { position: relative; margin-right: 12px; margin-bottom: 12px; }
.goods-spec-many .spec-group-item .spec-list .spec-item span { min-width: 50px; display: inline-block; border: 1px solid #ddd; text-align: center; padding: 0 15px; border-radius: 2px; font-size: 1.3rem; line-height: 30px; }
.goods-spec-many .spec-group-item .spec-item-add input { width: 110px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.goods-spec-many .spec-group-item .spec-item-add button { display: table-cell; height: 32px; font-size: 1.3rem; border-color: #e3e2e5; border-left: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; outline: none; }
/*.goods-spec-many .spec-group-button button { color: #2589ff; background-color: #fff; border-color: #2589ff; font-size: 12px; border-radius: 4px; outline: 0; font-weight: 400; padding: .6em 1em; outline: none !important; }
.goods-spec-many .spec-group-button button:hover, .goods-spec-many .spec-group-button button:focus { color: #fbfbfb; background-color: #19a7f0; }*/
.goods-spec-many .spec-group-add { display: none; }
.goods-spec-many .spec-group-add .spec-group-add-item { margin-bottom: 10px; }
.goods-spec-many .spec-group-add .spec-group-add-item input { width: 160px; border-radius: 4px; display: inline-block; margin-left: 12px; }
.goods-spec-many .goods-sku { display: none; /* 批量設置sku */ /* 商品sku表格 */ }
.goods-spec-many .goods-sku .goods-spec-line { 
    border: 1px dashed #e3e2e5; 
    margin-bottom: 2.4rem;
    margin-top: 2.4rem;
}
.goods-spec-many .goods-sku .spec-batch { margin-bottom: 2rem; }
.goods-spec-many .goods-sku .spec-batch .form-label { padding-top: 0; }
.goods-spec-many .goods-sku .spec-batch .form-group {
    margin-left: .6rem;
    margin-right: -4px;
}
.goods-spec-many .goods-sku .spec-batch .form-group input { width: 140px; }
.goods-spec-many .goods-sku .spec-sku-tabel td.td-spec-value { padding: .7rem 1.3rem !important; }
.goods-spec-many .goods-sku .spec-sku-tabel input { display: inline-block !important; }
.goods-spec-many .goods-sku .spec-sku-tabel input.ipt-goods-no { width: 100%; }
.goods-spec-many .goods-sku .spec-sku-tabel input.ipt-w80 { width: 80px; }
.spec-group-add-item.margin-top {
    margin-top: 2em;
}
.goods-spec-many .spec-group-item .spec-list .spec-item:hover .icon-shanchu1 { visibility: visible; }
.goods-spec-many .spec-group-item .spec-list .spec-item .icon-shanchu1 { position: absolute; width: 20px; top: -9px; right: -9px; visibility: hidden; }
.goods-spec-many .icon-shanchu1 { cursor: pointer; text-align: center; color: #ababab; font-size: 1.3rem; }
.goods-spec-many .icon-shanchu1:hover { color: #6b6b6b; }
.am-fl {
    float: left;
}
.am-cf:after {
    clear: both;
}
.am-cf:after, .am-cf:before {
    content: " ";
    display: table;
}
*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.goods-spec-many input[type=text],.goods-spec-many input[type=number]{
    height: 32px;
}
.goods-spec-many tbody tr td,.goods-spec-many tbody tr th{
    text-align: center;
}
.am-text-middle {
    vertical-align: middle!important;
}
.spe_img_one .col-xs-3{
    width: 100%;
    margin-top: 0;
    height: 0.3em;
    display: flex;
}
.spe_img_one a img{
    height: 44px;
}
.spe_img_one .thumbnail{
    width: 100%;
    display: block;
    height: 32px!important;
    border: 0px!important;
    padding: 0;
    margin-top: -6px;
}

.spe_img_one .btn-xs.btn-trash{
    display: none;
    width: 32px;
    height: 32px;
}
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><a style="color: red">*</a>{:__('Images')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-images" class="form-control" size="50" name="row[images]" type="text" placeholder="請上傳圖片">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-images" class="btn btn-danger faupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-maxcount="5"  data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-images"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-images"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><a style="color: red">*</a>{:__('Goods_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-goods_name" data-rule="required;length(~50)" class="form-control" name="row[goods_name]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><a style="color: red">*</a>積分商品分類:</label>
        <div class="row">
            <div class="col-xs-9">
                <div class="form-inline" data-toggle="cxselect" data-selects="cat_id">
                    <select  data-rule="required" class="cat_id form-control" name="cat_id" data-url="integralgoods/select">
                    </select>
                </div>
            </div>
        </div>
    </div>
    <input id="c-spec_type" data-rule="required;length(~50)" style="display: none;" class="form-control" name="row[spec_type]" type="text" value="10">
    <!-- 商品規格屬性(這個不用管，積分商城現階段不需要多規格) start -->
    <div class="goods-spec-many form-group">
        <!-- <label class="control-label col-xs-12 col-sm-2"></label>-->
        <div class="goods-spec-box col-xs-12 col-sm-11" style="background-color: white;">
            <!-- 規格屬性 -->
            <div class="spec-attr"></div>

            <!-- 添加規格：按鈕 -->
            <div class="spec-group-button">
                <button type="button" class="btn-addSpecGroup btn btn-xs btn-success">添加規格</button>
            </div>

            <!-- 添加規格：表單 -->
            <div class="spec-group-add">
                <div class="spec-group-add-item form-group">
                    <label class="control-label form-require">規格名 </label>
                    <input type="text" class="input-specName tpl-form-input"
                           placeholder="請輸入規格名稱" maxlength="20">
                </div>
                <div class="spec-group-add-item form-group">
                    <label class="control-label form-require">規格值 </label>
                    <input type="text" class="input-specValue tpl-form-input"
                           placeholder="請輸入規格值" maxlength="20">
                </div>
                <div class="spec-group-add-item margin-top">
                    <button type="button" class="btn-addSpecName btn btn-xs btn-success"> 確定
                    </button>
                    <button type="button" class="btn-cancleAddSpecName btn btn-xs btn-default"> 取消
                    </button>
                </div>
            </div>
            <!-- 商品多規格sku信息 -->
            <div class="goods-sku scrollable-horizontal">
                <!-- 分割線 -->
                <div class="goods-spec-line"></div>
                <!-- sku 批量設置 -->
                <div class="spec-batch form-inline">
                    <div class="form-group">
                        <label class="control-label">批量設置</label>
                    </div>
                    <div class="form-group">
                        <input type="number" data-type="line_price" placeholder="原價">
                    </div>
                    <div class="form-group">
                        <input type="number" data-type="goods_price" placeholder="售價">
                    </div>
                    <div class="form-group">
                        <input type="number" data-type="integral" placeholder="積分">
                    </div>
                    <div class="form-group">
                        <input type="number" data-type="stock_num" placeholder="庫存數量">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn-specBatchBtn btn btn-sm btn-secondary
                         radius">確定
                        </button>
                    </div>
                </div>
                <!-- sku table -->
                <table class="spec-sku-tabel table table-bordered table-centered margin-bottom-xs text-nowrap"></table>
            </div>
        </div>
    </div>

<div class="goods-spec-single">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><a style="color: red">*</a>所需積分:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-integral" data-rule="required;;length(~8)" class="form-control form-control" name="spec[integral]" type="number" value="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><a style="color: red">*</a>庫存:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-stock_num" data-rule="required;;length(~8)" class="form-control form-control" name="spec[stock_num]" type="number" value="100">
        </div>
    </div>
</div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><a style="color: red">*</a>{:__('Content')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-content" data-rule="required" class="form-control editor" rows="5" name="row[content]" cols="50"></textarea>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

{include file="goods/spec_many_template" /}
